import {Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
import {Notification} from './notification';
import {NotificationsService} from './notifications.service';
import {NotificationType} from './notificationType';
import {MaxPipe} from './max.pipe';
import {ICONS} from './icons';

@Component({
    selector: 'simple-notification',

    inputs: [
        'item',
        'timeOut',
        'position',
        'clickToClose',
        'maxLength',
        'showProgressBar',
        'pauseOnHover',
        'theClass'
    ],
    pipes: [MaxPipe],
    encapsulation: ViewEncapsulation.None,
    template: `
        <div class="simple-notification"
            (click)="removeSelf()"
            [class]="theClass"
            [ngClass]="{alert: item.type == 'alert', error: item.type == 'error', success: item.type == 'success', info: item.type == 'info'}"
            (mouseenter)="onEnter()"
            (mouseleave)="onLeave()">

            <div *ngIf="!item.html">
                <div class="title">{{item.title}}</div>
                <div class="content">{{item.content | max:maxLength}}</div>
                <div [innerHTML]="icons[item.type]"></div>
            </div>
            <div *ngIf="item.html"[innerHTML]="item.html"></div>

            <div class="progress" *ngIf="showProgressBar">
                <span [ngStyle]="{'width': progressWidth + '%'}"></span>
            </div>

        </div>
    `,
    styleUrls: ['notification.scss']
})

export class NotificationComponent {
    constructor(
        private _service: NotificationsService
    ) {}

    ngOnInit() {
        if (this.item.override) {
            this.attachOverrides();
        }
        if (this.timeOut !== 0) {
            this.startTimeOut();
        }
    }

    private icons: any = ICONS;

    ////// Inputs
    public item: Notification;
    public maxLength: number;
    public showProgressBar: boolean;
    public theClass: string;
    public theHtml: any;

    public overrides: any;
    private timeOut: number;
    private position: number;
    private clickToClose: boolean;
    private pauseOnHover: boolean;

    ////// Locals

    // Progress bar variables
    private progressWidth: number = 0;
    private stopTime: boolean = false;
    private timer: any;
    private steps: number;
    private speed: number;
    private count: number = 0;
    private start: any;
    private diff: any;

    private instance = () => {
        this.diff = (new Date().getTime() - this.start) - (this.count * this.speed);
        if (this.count++ === this.steps) {
            this._service.set(this.item, false);
        } else if ( !this.stopTime) {
            if (this.showProgressBar) {
                this.progressWidth += 100 / this.steps;
            }
            this.timer = setTimeout(this.instance, (this.speed - this.diff));
        }
    };

    startTimeOut() {
        this.steps = this.timeOut / 10;
        this.speed = this.timeOut / this.steps;
        this.start = new Date().getTime();
        this.timer = setTimeout(this.instance, this.speed);
    }

    onEnter() {
        if (this.pauseOnHover) {
            this.stopTime = true;
        }
    }

    onLeave() {
        if (this.pauseOnHover) {
            this.stopTime = false;
            setTimeout(this.instance, (this.speed - this.diff));
        }
    }

    setPosition() { return this.position !== 0 ? this.position * 90 : 0; }
    removeSelf() { if (this.clickToClose) {
        this._service.set(this.item, false);
    }}

    // Attach all the overrides
    attachOverrides() {
        let keys = Object.keys(this.item.override);
        keys.forEach(a => {
            switch (a) {
                case 'timeOut':
                    this.timeOut = this.item.override.timeOut;
                    break;
                case 'clickToClose':
                    this.clickToClose = this.item.override.clickToClose;
                    break;
                case 'maxLength':
                    this.maxLength = this.item.override.maxLength;
                    break;
                case 'showProgressBar':
                    this.showProgressBar = this.item.override.showProgressBar;
                    break;
                case 'pauseOnHover':
                    this.pauseOnHover = this.item.override.pauseOnHover;
                    break;
                case 'theClass':
                    this.theClass = this.item.override.theClass;
                    break;
                default:
                    console.error(`no option with the key ${a} exists`);
                    break;
            }
        });
    }

    ngOnDestroy() { clearTimeout(this.timer); }
}